<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        1. 如何使用函数
            函数在声明之后, 默认不会自动执行, 需要调用才能执行.
            格式: 函数名() 


        2. 如何引用函数
            引用函数是 不会使用函数, 是获取到了函数本身, 从而可实现传递函数等功能
            格式: 函数名    (注意哦,  函数名后面千万不能加(), 加了()就变为使用函数  )


        3. window 对象
            window 代表浏览器. 可使用全局所有可用的变量, 函数


        4. this 对象
            this 是关键字, 代表当前对象
            
           注:
            * 普通函数内的this, 代表window对象
            * 事件函数内的this, 代表当前触发事件的对象 ( 谁触发该事件, this就指向谁 )
     -->
    
    <script>
        //使用函数
        
        function demo1(){
            console.log('吃一个月泡面属实有点惨');
        }
        demo1();
        console.log('-----------------------');

    </script>

    <script>
        
        function demo2(){
            console.log('武汉加油,中国加油');
        }

        //引用函数
        var x = demo2;//没有调用函数
        console.log(x);

        x();//调用变量x的函数
        console.log('------------------');
    </script>

    <script>
        //window对象
        var x = 10;
        console.log(x);
        console.log(window.x);

        function demo3(){
            console.log('我的函数是不是window的宠儿');
        }

        demo3();
        window.demo3();//可以用
    </script>

    <script>
        // 当前对象
        var obj = {
            '爱好' : '老母鸡',
            '希望' : '吃鸡',
            '愿望' : '把把awm,三级套',
            demo4 : function(){
                console.log(this);
            }
        }

        obj.demo4();
        console.log('-----------');


        //普通函数
        
        function demo5(){
            console.log(this);//代表window对象
        }
        demo5();
    </script>

    <ul>
        <li>胡歌</li>
        <li>霍建华</li>
        <li>袁弘</li>
        <li>彭于晏</li>
    </ul>

    <script>
        
        var li = document.getElementsByTagName('li')

        for(var i = 0; i <= 3; i++){
            li[i].onclick = function(){
                this.style.color = 'red';
            }
        }
    </script>

    <ul id="person">
        <li>胡歌</li>
        <li>霍建华</li>
        <li>袁弘</li>
        <li>彭于晏</li>
    </ul>

    <script>
        var li = document.getElementById('person').getElementsByTagName('li');

        for(var i = 0; i <= 3; i++){
            li[i].onclick = function(){
                for(var j = 0; j <= 3; j++){
                    li[j].style.color = 'black';
                }
                this.style.color = 'blue'
            }
        }
    </script>
</body>
</html>